import React, { Component } from "react";
import { Row, Col } from "antd";
import PropTypes from "prop-types";
import { FormattedMessage } from "react-intl";
import messages from "@i18n/messages";
import { createInput, createInputNumber, createSelect } from "../factory";

class TextInputProperties extends Component {
  static propTypes = {
    data: PropTypes.object.isRequired,
    node: PropTypes.object.isRequired,
    onChange: PropTypes.func.isRequired,
    onUpdate: PropTypes.func.isRequired,
  };

  render() {
    const { data, onChange, onUpdate } = this.props;
    const getOptions = property => ({
      size: "small",
      onChange,
      onEnter: onUpdate,
      data,
      property,
      getter: (data, property) => data.get(property),
    });
    const getSelectOptions = (property, options) => {
      const { onUpdate } = this.props;
      const onChange = (value) => {
        onUpdate(value, "type");
      };
      return {
        size: "small",
        onChange,
        onUpdate,
        data: this.props.data.toJS(),
        property,
        getter: (data, property) => data[property],
        options,
      };
    };
    return (
      <>
        <Row className="row">
          <span className="label"><FormattedMessage {...messages.propertyPanelPlaceholder} /></span>
          {createInput(getOptions("placeholder"))}
        </Row>
        <Row className="row">
          <Col span={10}>
            <span className="label"><FormattedMessage {...messages.propertyPanelType} /></span>
          </Col>
          <Col span={14}>
            {createSelect(
              getSelectOptions("type", [
                {
                  label: "文本",
                  value: "text",
                },
                {
                  label: "数字",
                  value: "number",
                },
              ])
            )}
          </Col>
        </Row>
        <Row className="row">
          <div className="label"><FormattedMessage {...messages.propertyPanelMaxlength} /></div>
          {createInputNumber(getOptions("maxLength"))}
        </Row>
      </>
    );
  }
}

export default TextInputProperties;
